<center><textarea class="word-character-text-box" placeholder="Enter your text here..."></textarea> 

<div class="results-container-word-counter">
   <ul>
   <li><div><strong>Total Characters</strong></div> <div><span id="characterCount">0</span></div></li>
   <li><div><strong>Total Words</strong></div> <div><span id="wordCount">0</span></div></li>
   <li><div><strong>Total Sentences</strong></div> <div><span id="sentenceCount">0</span></div></li>
   <li><div><strong>Total Paragraphs</strong></div> <div><span id="paragraphCount">0</span></div></li>
   <li><div><strong>Total Reading Time</strong></div> <div><span id="readingTime">0</span></div></li>
   </ul>
</div>             
</center>

<br><div class="keywords"> 
  <h3 id="Top_keyword_Rankings_"><span><strong>Top keyword Rankings</strong></span></h3>
  <br>
  <div id="topKeywords"> </div>
</div>

<style>
/* CSS كامل هنا */
.word-character-text-box{background-color:#eee;border:none;border-radius:9px;width:98%;font-size:17px;margin-bottom:1em;min-height:15rem}
.word-character-text-box:focus{background-color:#eee}
#wordCount{font-weight:700;color:#0693e3}
#characterCount{font-weight:700;color:#cf2e2e}
#sentenceCount{font-weight:700;color:#ff8000}
#paragraphCount{font-weight:700;color:#f0f}
#readingTime{font-weight:700;color:#000}
.results-container-word-counter ul{display:flex;flex-wrap:wrap;list-style:none;width:90%;justify-content:space-between}
</style>

<script>
/* JavaScript كامل هنا */
"use strict";var input=document.querySelectorAll("textarea")[0],characterCount=document.querySelector("#characterCount"),wordCount=document.querySelector("#wordCount"),sentenceCount=document.querySelector("#sentenceCount"),paragraphCount=document.querySelector("#paragraphCount"),readingTime=document.querySelector("#readingTime"),keywordsDiv=document.querySelectorAll(".keywords")[0],topKeywords=document.querySelector("#topKeywords");
input.addEventListener("keyup",function(){console.clear(),characterCount.innerHTML=input.value.length;var e=input.value.match(/\b[-?(\w+)?]+\b/gi);if(wordCount.innerHTML=e?e.length:0,e){var n=input.value.split(/[.|!|?]+/g);sentenceCount.innerHTML=n.length-1}else sentenceCount.innerHTML=0;if(e){var t=input.value.replace(/\n$/gm,"").split(/\n/);paragraphCount.innerHTML=t.length}else paragraphCount.innerHTML=0;if(e){var o=Math.floor(60*e.length/120);if(o>59){var r=Math.floor(o/60);o-=60*r,readingTime.innerHTML=r+"m "+o+"s"}else readingTime.innerHTML=o+"s"}else readingTime.innerHTML="0s";if(e){for(var s=[],a=["a","able","about", ... ],i=0;i<e.length;i++)-1===a.indexOf(e[i].toLowerCase())&&isNaN(e[i])&&s.push(e[i].toLowerCase());var l={};for(i=0;i<s.length;i++)s[i]in l?l[s[i]]+=1:l[s[i]]=1;var h=[];for(var u in l)h.push([u,l[u]]);h.sort(function(e,n){return n[1]-e[1]}),topKeywords.innerHTML="";for(i=0;i<h.length&&i<4;i++){var d=document.createElement("li");d.innerHTML="<b>"+h[i][0]+"</b>: "+h[i][1],topKeywords.appendChild(d)}}keywordsDiv.style.display=e?"block":"none"});
</script>